<template>
  <view>
    <view
      class="narBar"
      :class="[{ 'navbar-fixed': isFixed, 'border-bottom': borderBottom }]"
      :style="[barstyle]"
    >
      <view
        class="status-bar"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <view class="content" :style="[navstyle]">
        <slot v-if="isNavbarSlot" name="navbar"></slot>
        <block v-else>
          <view
            class="back_box"
            :style="[leftStyle]"
            v-if="isBack"
            @tap.stop="goBack"
          >
            <image class="backicon" :src="backIcon" mode="scaleToFill"></image>
          </view>
          <view class="title_box" :style="[titleStyle]">
            <text
              class="title"
              :style="{
                color: titleColor,
                fontSize: titleSize + 'rpx',
                fontWeight: titleWeight,
              }"
              >{{ title }}</text
            >
          </view>
        </block>
      </view>
      <view :style="{ height: bottomHeight + 'rpx' }"></view>
      <view class="info" id="info">
        <slot name="info"></slot>
      </view>
    </view>
    <view
      v-if="isFixed"
      :style="{ width: '100%', height: fixedHeight + 'px' }"
    ></view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed, toRefs, getCurrentInstance } from "vue";
import { onShow, onReady } from '@dcloudio/uni-app' 
import { useStore } from "@/store";
export default defineComponent({
  props: {
    title: { type: String, default: "" },
    backIcon: { type: String, default: "../../static/common/back_icon.png" },
    isBack: { type: Boolean, default: true },
    className: { type: String, default: '' },
    background: { type: String, default: 'transparent' },
    titleColor: { type: String, default: '#333333' },
    titleSize: { type: [String, Number], default: 36 },
    titleWeight: { type: [String, Number], default: 'normal' },
    bottomHeight: { type: Number, default: 22 },
    zIndex: { type: Number, default: 9999 },
    customBack: { type: Boolean, default: false },
    isFixed: { type: Boolean, default: true },
    borderBottom: { type: Boolean, default: false },
    isNavbarSlot: { type: Boolean, default: false },
  },
  setup(props, context) {
    // @ts-in
    const instance = (getCurrentInstance() as any);
    const prop = toRefs(props);
    const store = useStore();
    const slotHeight = ref<number | string>(0);

    const statusBarHeight = computed<number>(() => {
      return store.getters.statusBarHeight;
    });

    const barstyle = computed<object>(() => {
      let style: any = {
        background: prop.background.value,
        zIndex: prop.zIndex.value,
      }
      if (/^(http|https).*\.(png|jpg|jpeg|image|gif)$/.test(prop.background.value)) {
        style.background = `url(${prop.background.value})`;
      }
      console.log('style', style)
      return style;
    });
  
    const navstyle = computed<object>(() => {
      return {
            height: store.getters.menuButtonInfo.height + 'px',
            marginTop: store.getters.menuButtonInfo.top - store.getters.appInfo.statusBarHeight + 'px',
        };
    });

    const leftStyle = computed<object>(() => {
      return  {
            height: store.getters.menuButtonInfo.height + 'px',
            width: store.getters.appInfo.windowWidth - store.getters.menuButtonInfo.left + 10 + 'px',
        };
    });

    const titleStyle = computed<object>(() => {
      return {
            lineHeight: store.getters.menuButtonInfo.height + 'px',
            width:
                store.getters.appInfo.windowWidth -
                (store.getters.appInfo.windowWidth - store.getters.menuButtonInfo.left + 10) * 2 +
                'px',
            left: store.getters.appInfo.windowWidth - store.getters.menuButtonInfo.left + 10 + 'px',
        };
    });

    const fixedHeight = computed<object>(() => {
      return (
            store.getters.menuButtonInfo.top -
            store.getters.appInfo.statusBarHeight +
            store.getters.menuButtonInfo.height +
            statusBarHeight.value +
            slotHeight.value +
            uni.upx2px(prop.bottomHeight.value)
        );
    });

    onMounted(() => {
        const query = uni.createSelectorQuery().in(instance.appContext.config.globalProperties);
        query
            .select('#info')
            .boundingClientRect((data) => {
                slotHeight.value = Number(data.height);
            })
            .exec();
        context.emit('height', fixedHeight.value);
    })

    const goBack = () => {
        // 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
        if (prop.customBack.value) {
            context.emit('back');
        } else {
            const pages = getCurrentPages(); // 当前页
            const beforePage = pages[pages.length - 2];
            if (!beforePage) {
                // 从外部链接进来统一返回首页
                uni.switchTab({
                    url: '/pages/index/index',
                });
            } else {
                uni.navigateBack({ delta: 1 });
            }
        }
    }

    return {
      prop,
      slotHeight,
      statusBarHeight,
      barstyle,
      navstyle,
      leftStyle,
      titleStyle,
      fixedHeight,
      goBack,
    };
  },
});
</script>
<style lang="scss" scoped>
.navbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.border-bottom {
  border-bottom: 1rpx solid #ebeaea;
}
.narBar {
  z-index: 1;
  width: 750rpx;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  .status-bar {
    width: 100%;
    height: auto;
  }
  .content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .back_box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .backicon {
        margin-left: 26rpx;
        width: 24rpx;
        height: 38rpx;
      }
    }
    .title_box {
      position: absolute;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .info {
    width: 100%;
    height: auto;
  }
}
</style>
